<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css" />
    <title>Document</title>
</head>
<body>
    <div id="app">
    <h2>记事本</h2>
    <div class="main">
        <!-- 【输入框】 -->
    <!-- 步骤四a:给input表单添加v-model双向绑定语法。-->
    <!-- 步骤五a:添加回车点击事件add。-->
    <input type="text" v-model="title” @keyup.enter="add"/><ul>
    <!-- 【记录列表】 -->
    <!-- 步骤二:在li标签内,用v-for语法搭配key渲染list数据。-->
    <li v-for="(item,index) in list" :key="item.id">
    <!-- 步骤三:使用插值语法,更改需要渲染的标题、序号。 -->
    <div class="content"><span>{{ index + 1 }}</span> {{item.title}} </div>
    <!-- 【删除按钮】 -->
    <!-- 步骤十:给删除按钮添加点击事件。	-->	
    <button @click="list.splice(index,1)">❌</button>
</li>
</ul>
    <!-- 【如果没数据显示】 -->
    <!-- 步骤九:完善空空如也显示 -->
    <p class="empty"v-show="list.length == 0">空空如也...</p ></div>
    <!-- 【底部栏】 -->
    <div class="bottom">
    <!-- 步骤十二:将合计的默认数量改成数组长度 -->
    <span>合计:{{ list.length }}</span>
    <!-- 步骤十一:给清空按钮添加点击事件 -->
    <span @click="list = []">清空</span>
</div>
</div>
<script> 
new Vue({
    el:'#app', 
    data:{
    // 步骤四b:把v-model定义的变量,声明在data数据中。 
    title:'',
    // 步骤一:在data中声明一个数组,可以先放一些测试的数据。 
    list:[
    // { id:1,title:'吃饭'}，
    // { id:2, title:'睡觉'},
    // { id:3, title:'做核酸'}
    ]
    },
    // 步骤五b:声明回车点击事件add。 
    methods:{ add(){
    // 步骤六:如果输入为空就不往下执行,并且弹出提示框。
    if(this.title == '') return alert('请输入一点内容')
    // if(this.title.trim() == '') return alert('请输入一点内容')
    //步骤七:能来到这一步证明有内容,就把输入的内容添加到数组中。 
    this.list.unshift({
    id:Date.now(),
    title: this.title,
    })
    // 步骤八:把数据添加到列表后,把输入框内容清空。 
    this.title =''
    }
    }
    })
    </script>
    <!-- 【时间戳】
    时间戳是指1970年1月1日0时0分0秒0毫秒，到现在的毫秒数。
    1969年12月,产生了现代操作系统之父--unix操作系统。1970年发行。
    【v-model的trim修饰符】
    作用:获取到输入框值时,可以自动帮你去除首尾空格语法:v-model.trim ="数据"
    
    【存储方式】
    localstorage sessionstorage
    
    break countine return -->
</body>
</html>